<template>
    <div>
        <back></back>
        <div class="clientDetailHeader">
            <div class="investBox">
                <span>累计投资</span>
                <p class="color">{{sumInvest}}</p>
                <router-link :to="{ name: 'subInvite', params: {id:id}}">【查看推荐】</router-link>
            </div>
            <div class="inviteBox">
                <div>
                    <span>邀请人</span>
                    <p>{{inviteUse}}</p>
                </div>
                <div class="line"></div>
                <div>
                    <span>推荐人数</span>
                    <p>{{recommand}}人</p>
                </div>
            </div>
        </div>
        <div class="clientDetailList">
            <div class="clientDetailListDetail" v-for="item of selectedClient" :key="item.id">
                <p>
                    <span class="name">{{item.bidName}}</span>
                    <span class="color">{{item.userMoney}}元</span>
                </p>
                <p>
                    <span>起息时间 [{{item.startIntentDate | bidtimeWithoutHMS}}]</span>
                    <span>到期时间 [{{item.endIntentDate | bidtimeWithoutHMS}}]</span>
                </p>
            </div>
        </div>
        <div class="moreBtn" @click="fetchData">{{noMore}}</div>
    </div>
</template>
<style>
.clientDetailHeader {
    height: 4.3rem;
    color: #333a4b;
    background: white
}

.clientDetailHeader span {
    font-size: .28rem;
    color: #999
}

.clientDetailHeader p.color {
    font-size: .66rem;
    color: #fa3e04
}

.investBox {
    position: relative;
    height: 3.04rem;
    border-bottom: 1px solid #eee
}

.investBox>span,
.investBox>p {
    display: block;
    text-align: center
}

.investBox>span {
    padding-top: .75rem;
    margin-bottom: .55rem
}

.investBox>a {
    position: absolute;
    bottom: .15rem;
    right: .4rem;
    font-size: .253rem
}

.inviteBox {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-top: .15rem
}

.inviteBox>div {
    flex: 0 0 49%;
    text-align: center;
}

.inviteBox>.line {
    flex: 0 0 2px;
    height: .6rem
}

.inviteBox span {
    font-size: .253rem
}

.inviteBox p {
    font-size: .32rem
}

.clientDetailList {
    margin-top: .3rem;
    background: white
}

.clientDetailListDetail {
    height: 1.74rem;
    padding: .4rem;
    border-bottom: 1px solid #eee
}

.clientDetailListDetail>p {
    display: flex;
    justify-content: space-between;
    /* line-height: .87rem */
}

.clientDetailListDetail span {
    font-size: .253rem;
    color: #999
}

.clientDetailListDetail span.name,
.clientDetailListDetail span.color {
    font-size: .36rem;
    color: #333a4b;
    margin-bottom: .2rem
}

.clientDetailListDetail span.color {
    color: #fa3e04
}
</style>

<script>
import back from "@/components/common/back"
import qs from "qs"

export default {
    components: { back },

    filters: {
        bidtimeWithoutHMS: function (value) {
            return value.substring(0, 10)
        }
    },

    data() {
        return {
            id: this.$route.params.clientId,
            sumInvest: this.$route.params.sumInvest,
            recommand: this.$route.params.recommand,
            inviteUse: localStorage.truename,
            page: 1,  // 当前页码
            limit: 10, // 每页条数
            selectedClient: [],
            dataLength: 16,
            loadType: false,
            noMore: "点击加载更多",

        }
    },

    created() {
        this.fetchData();
    },

    methods: {
        fetchData() {
            if (!this.id) {
                this.id = localStorage.userId;
                this.sumInvest = localStorage.sumInvest;
                this.recommand = localStorage.recommand;
            } else {
                window.localStorage.setItem("userId", this.id)
                window.localStorage.setItem("sumInvest", this.sumInvest)
                window.localStorage.setItem("recommand", this.recommand)
            }
            this.noMore = "正在加载数据中";
            if (this.loadType) {
                return
            }
            // if (this.page * this.limit >= this.dataLength + this.limit) {
            //     this.noMore = "没有更多数据了";
            //     return
            // }

            let param = {
                isMobile: 1,
                memberId: window.localStorage.memberId,
                userId: this.id,
                page: this.page,
                limit: this.limit,
                showType: 1
            }
            param = qs.stringify(param);
            this.$ajax.post("/salesman/getInvestPersonInvestListOfSalesman.do", param).then(response => {
                this.loadType = false;
                this.noMore = "点击加载数据";
                if (response.data.data == []) {
                    this.noMore = "没有更多数据了";
                    return
                }
                this.selectedClient = this.selectedClient.concat(response.data.data);
                this.page++
            })
        }
    },

}
</script>
